<html >
  <head>
  	<meta http-equiv="content-type"  content="text/html; charset=UTF-8"/>
    <meta http-equiv="Pragma"        content="no-cache"/>
    <meta http-equiv="Cache-Control" content="no-cache"/>

    <link rel="stylesheet" href="./../css/bootstrap/3.3.4/bootstrap.min.css"/>
    <script src="./../jslib/angular-1.5.6/angular.js"></script>
	<script src="./../jslib/angular-1.5.6/angular-animate.js"></script>
    <script>
    var app = angular.module('ngShowcaseApp', []);

    app.controller('ctrl.utils.modal', function ($scope) {
      var vm = $scope.vm = {};

      vm.modal = {
        title: 'Modal dialog Title',
        msg: 'Hello,Bootstrap.'
      };
    });
</script>
  </head>
<body ng-app="ngShowcaseApp">
<div  ng-controller="ctrl.utils.modal">
  <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">触发模式对话框</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">{{vm.modal.title}}</h4>
      </div>
      <div class="modal-body">{{vm.modal.msg}}</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">??</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal">??</button>
      </div>
    </div>
  </div>
</div>
<hr>
<div class="form-group">
  <label>标题</label>
  <input type="text" class="form-control" ng-model="vm.modal.title" required/>
</div>
<div class="form-group">
  <label>内容</label>
  <input type="text" class="form-control" ng-model="vm.modal.msg" required/>
</div>
</div>


<h3>说明</h3>
<ul>
  <li>使用bootstrap内置样式和指令完成模态框控件</li>
  <li>
    还可以采用angular-bootstrap封装指令，参考官方demo
    <a href="http://angular-ui.github.io/bootstrap/" target="_blank">官方Demo</a>
  </li>
</ul>

  </body>
</html>
